<template>
    <div class="hyperlink-detail">
        <div class="hyperlink-detail-search">
            <el-input placeholder="输入链接名称搜索" class="input-radio-search" v-model="searchData" @keyup.enter.native="hendleSearch">
                <!-- <el-button slot="append" icon="el-icon-search" @click="hendleSearch"></el-button> -->
            </el-input>
        </div>
        <el-scrollbar :style="{height:'196px'}">
            <el-radio-group v-model="self.selectData" @change="handlerChange">
                <el-radio :label="item" v-for="(item,index) in linkList" :key="index" v-if="self.forbidden.indexOf(index) == -1">
                    <div class="hyperlink-detail-span" >
                        <!-- v-if="['GOODS','MAGIC','MINI','OHTER'].includes(item.route_type)" -->
                        <goodsSelet type="radio"  v-if="item.route_type == 'GOODS'" v-model="item.param">
                            {{item.name}}
                            <span class="hyperlink-detail-tips" v-if="item.param.title">
                                ({{item.param.title}})
                            </span>
                            <i class="le-icon le-icon-arrow-right"></i>
                        </goodsSelet>
                        <pagesSelet type="radio" v-else-if="item.route_type == 'MAGIC'" v-model="item.param">
                            {{item.name}}
                            <span class="hyperlink-detail-tips" v-if="item.param.title">
                                ({{item.param.title}})
                            </span>
                            <i class="le-icon le-icon-arrow-right"></i>
                        </pagesSelet>
                                    
                        <mini-program-select type="radio" v-else-if="item.route_type == 'MINI'" v-model="item.param">
                            {{ item.name }}
                            <span class="hyperlink-detail-tips" v-if="item.param.applet || item.param.wechat">
                            ({{ item.param.applet.appId ? item.param.applet.appId : item.param.wechat.appId }})
                            </span>
                            <i class="le-icon le-icon-arrow-right"></i>
                        </mini-program-select>
                        
                        <web-link type="radio" v-else-if="item.route_type == 'OTHER'" v-model="item.param">
                            {{ item.name }}
                            <span class="hyperlink-detail-tips" v-if="item.param.url"> ({{ item.param.url }}) </span>
                            <i class="le-icon le-icon-arrow-right"></i>
                        </web-link>
                    <span v-else>{{item.name}}</span>

                    </div>
                    <!-- <span v-else>{{item.name}}</span> -->
                </el-radio>
            </el-radio-group>
        </el-scrollbar>
    </div>
</template>
<script type="text/javascript">
import goodsSelet from '/$/magic/components/goodsSelet/index.vue'
import pagesSelet from './pages.vue'
import store from "/@/store";
import miniProgramSelect from './module/mini-program.vue';
import webLink from './module/web-link.vue';
export default {
    components: {
        goodsSelet,
        pagesSelet,
        miniProgramSelect,
        webLink
    },
    inject: ['self'],
    data() {
        return {
            searchData: "",
            cacheData: null,
            linkList: [],
            pageList:[]
        }
    },
    computed: {
       sellVendorOption() {
            return (item) => {
              let pm 
              if(item.title){
            pm =item

              }else{
               pm =JSON.parse(item)

              }
              console.log(pm,"pm");
              if(pm.title){
                return true

              }else{
                return false
              }
            }
        }
    },
    /**
     * 数据监听
     * @type {Object}
     */
    watch: {
        "self.original": {
            async handler(newData, oldData) { //特别注意，不能用箭头函数，箭头函数，this指向全局
                if(this.pageList.length){
                        this.handlerDataUpdate();

                }else{
                        await this.getpageList()
                        this.handlerDataUpdate();
                }
            },
            immediate: true, //刷新加载 立马触发一次handler
            deep: true // 可以深度检测到 obj 对象的属性值的变化
        },
        searchData(value) {
            if (value == "") {
                this.linkList = JSON.parse(JSON.stringify(this.cacheData));
                this.self.selectData = null;
            }
        }
    },
    /**
     * 页面加载执行
     * @return {[type]} [description]
     */
    async mounted() {
        this.cacheData = JSON.parse(JSON.stringify(this.linkList));
        this.handlerDataUpdate();
    },
    methods: {
        /**
         * 处理选择器
         * @param  {[type]} value [description]
         * @return {[type]}       [description]
         */
        handlerChange(value) {
             console.log("value",value)
        },
        getpageList(){
         
            store.service.magic.pageList.list().then(res=>{
                this.pageList=res
                this.linkList=JSON.parse(JSON.stringify(this.pageList))
                this.cacheData = JSON.parse(JSON.stringify(this.linkList));
                this.handlerDataUpdate();
            })
            
        },
        /**
         * 数据更新
         * @return {[type]} [description]
         */
         handlerDataUpdate() {
           
           if(!this.linkList.length){
             this.linkList=JSON.parse(JSON.stringify(this.pageList))
           }

           let original = this.self.original;
           if(Object.getOwnPropertyNames(original).length<2){
             this.linkList=JSON.parse(JSON.stringify(this.pageList))
           }else{
             if(JSON.stringify(original.param)=='{}'){
               this.linkList=JSON.parse(JSON.stringify(this.pageList))
             }
             for (var index in this.linkList) {
               let item = this.linkList[index];
               if(item.id==original.id){

                   this.linkList[index] = original
                 }
             }
             this.self.selectData = original;
           }
       },
        hendleSearch(e) {
            let value = this.searchData;
            let simpleArr = this.linkList.filter((item, i) => {
                let str = ['', ...value, ''].join('.*'); //转化成正则格式的字符串
                let reg = new RegExp(str) //正则
                return reg.test(item.name) //去匹配待查询的字符串
            });
            this.linkList = simpleArr;
            for (let index in simpleArr) {
                let item = simpleArr[index];
                this.self.selectData = item;
                break;
            }
        }
    }
}
</script>
<style lang="less" scoped>
@import './style.less';
</style>